<template>
  <div class="Search">
    <van-search
      v-model="keywords"
      shape="round"
      @search="Search"
      placeholder="请输入搜索关键词"
    />
    <!-- 为你推荐组件 -->
    <notshop v-if="shop.length == 0"></notshop>
    <div v-else class="showshop">
      <van-card
        v-for="list in shop"
        :key="list.id"
        :price="list.vip_price"
        :title="list.store_name"
        :thumb="list.image"
      >
        <template #desc>
          <div class="nextshop">
            <i class="fa fa-jpy" aria-hidden="true"></i> {{ list.price }}
          </div>
        </template>
        <template #bottom>
          <div class="navbox">
            <img
              v-show="list.price != 0"
              src=""
              alt=""
            />
            <span>已售{{ list.sales }}{{list.unit_name }}</span>
          </div>
          <div class="navbotbox">
            <router-link :to="`ProductDetails/${list.id}`">
              <van-icon name="cart-circle-o" />
            </router-link>
          </div>
        </template>
      </van-card>
    </div>
   
  </div>
</template>
<script>
import notshop from "../components/recommend_of_you.vue";

export default {
  data() {
    return {
      keywords: "",
      shop: [],
    };
  },

  methods: {
    Search() {
      this.axios.get(`/products?keyword=${this.keywords}`).then((re) => {
        console.log("搜索2的", re);
        this.shop = re;
      });
    },
  },

  components: {
    notshop,
  },
};
</script>
<style lang="less" scoped>
.Search {
  .showshop {
    .van-card {
      padding: 10px;
      border-bottom: 1px solid #f4f4f4;
      background-color: #fefefe;
    }
    div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .van-card__title {
        display: block;
        font-size: 15px;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .van-card__bottom {
      display: flex;

      .navbox {
        flex: 1;
        img {
          margin-left: 3px;
          width: 23px;
          height: 10.5px;
        }
        span {
          margin-left: 5px;
          font-size: 12px;
          color: #aaa;
        }
      }
      .navbotbox {
        .van-icon {
          font-size: 28px;
          color: rgb(236, 91, 91);
          font-weight: normal;
        }
      }
    }
    .van-card__price-integer {
      font-size: 12px;
      font-weight: bold;
    }
    .van-card__price-decimal {
      font-size: 12px;
      font-weight: bold;
    }
    .nextshop {
      font-size: 17px;
      color: red;
      display: inline-block;
      padding-top: 20px;
    }
  }
}
</style>